<template>
    <div class="container" :style="`height:${view.height+30}px;`" style=" ">
        <!-- 表单 -->
        <el-form ref="paramForm" label-position="top" label-width="150px" :model="formData">
            <el-row>
                <el-col :span="24" style="text-align: right; margin:  0 0 20px;">
                    <el-button type="primary" style="width: 100%;" @click="calcHandler">计算</el-button>
                </el-col>
            </el-row>
            <!-- 工程类型 -->
            <el-card v-if="data.chart_info.area < 10" class="box-card">
                <h4>选择工程类型</h4>
                <el-radio-group v-model="formData.isUseTuN">
                    <el-radio :label="1">小型农水工程（常用频率）</el-radio>
                    <el-radio :label="0">中小水库工程（希遇频率）</el-radio>
                </el-radio-group>
            </el-card>

            <!-- 设计频率 -->
            <!--  <el-card class="box-card" style="margin-top: 20px">
                <h4>选择设计频率</h4>
                <el-checkbox-group v-model="formData.frequency">
                    <el-checkbox v-for="ps in allPs" :key="ps" :label="`${(1 / ps * 100).toFixed(2)}%`"
                        class="readonly-checkbox">
                        {{ (1 / ps * 100).toFixed(2) }}%
                    </el-checkbox>
                </el-checkbox-group>
            </el-card>
            -->
            <!-- 流域基本情况 -->
            <el-card class="box-card" style="margin-top: 20px;overflow: auto;" >
                <h4>流域基本情况</h4>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="流域中心经度">
                            <el-input :value="data.session.lon" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="流域中心纬度">
                            <el-input :value="data.session.lat" readonly></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="所在的水文分区">
                            <el-input :value="data.chart_info.area_name" readonly></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-card>

            <!-- 参数输入 -->
            <el-card class="box-card" style="margin-top: 20px;overflow: scroll;" :style="`height:${view.height-510}px;`">
                <h4>参数输入</h4>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="Cs / Cv">
                            <el-input v-model="formData.csCv"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="最大初损 Imax">
                            <el-input v-model="formData.imax"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" v-for="contour in data.chart_info.contours" :key="contour.key">
                        <el-form-item :label="contour.name">
                            <el-input :value="contour.value.toFixed(3)" readonly></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="θ">
                            <el-input v-model="formData.theta"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="汇流参数 m">
                            <el-input v-model="formData.m"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="平均入渗率 μ">
                            <el-input v-model="formData.mu"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="10min 点面系数 α">
                            <el-input v-model="formData.alpha0"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="1h 点面系数 α">
                            <el-input v-model="formData.alpha1"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="6h 点面系数 α">
                            <el-input v-model="formData.alpha2"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="24h 点面系数 α">
                            <el-input v-model="formData.alpha3"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';
const emits = defineEmits(['calcHandler']);
// 定义数据接口
interface DataProps {
    session: {
        lon: number;
        lat: number;
        f: number;
        imax: number;
        theta: number;
        m: number;
        mu: number;
        alphas: number[];
    };
    chart_info: {
        area: number;
        area_name: string;
        imax: number;
        theta: number;
        m: number;
        mu: number;
        alphas: number[];
        contours: Array<{
            key: number;
            name: string;
            value: number;
        }>;
    };
}

// 接收父组件传入的数据
const props = defineProps<{ data: DataProps, formValues1: any }>();
const formData = reactive({
    isUseTuN: 1, // 工程类型
    frequency: ['1.00%', '2.00%', '5.00%', '10.00%', '20.00%'], // 选择频率
    csCv: '3.5', // Cs / Cv
    imax: props.data.chart_info.imax, // 最大初损
    theta: props.data.chart_info.theta, // θ
    area: props.data.chart_info.area,
    m: props.data.chart_info.m, // 汇流参数
    mu: props.data.chart_info.mu, // 平均入渗率
    alpha0: props.data.chart_info.alphas[0], // 点面系数 α
    alpha1: props.data.chart_info.alphas[1],
    alpha2: props.data.chart_info.alphas[2],
    alpha3: props.data.chart_info.alphas[3],
    lon: props.data.session.lon, // 经度
    lat: props.data.session.lat, // 纬度
});

// 监听 props.data 的变化，并同步更新 formData 的值
watch(
    () => props.data, // 监听整个 props.data
    (newData) => {
        formData.imax = newData.chart_info.imax;
        formData.theta = newData.chart_info.theta;
        formData.area = newData.chart_info.area;
        formData.m = newData.chart_info.m;
        formData.mu = newData.chart_info.mu;
        formData.alpha0 = newData.chart_info.alphas[0];
        formData.alpha1 = newData.chart_info.alphas[1];
        formData.alpha2 = newData.chart_info.alphas[2];
        formData.alpha3 = newData.chart_info.alphas[3];
        formData.lon = newData.session.lon;
        formData.lat = newData.session.lat;
    },
    { immediate: true, deep: true } // 立即执行一次并深度监听
);

// 设计频率数据
const allPs = [2, 20, 3, 30, 4, 40, 5, 50, 10, 100];

const calcHandler = function () {
    emits('calcHandler', formData)
}

const view = reactive({
    height: window.innerHeight - 220,
});
</script>

<style scoped>
.container {
    margin: 0 5px;
    padding: 0;
    overflow: auto;
}

.box-card {
    border-radius: 4px;
    padding: 20px;
}
</style>
<style>
.readonly-checkbox {
    pointer-events: none;
    /* 禁止鼠标事件，使其无法点击 */
    opacity: 0.7;
    /* 设置为半透明，表示只读效果 */
    cursor: not-allowed;
    /* 鼠标样式显示为不可操作 */
}
</style>
